<template>
    <div class="page-box">
      <div class="page-search">
        <div>
          <label>采购单号</label>
          <el-input v-model="searchForm.Number" style="width: 160px;" placeholder="请输入采购单号"></el-input>
        </div>
        <div>
          <label>入货仓</label>
          <el-select v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择入货仓" >
            <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName"
              :value="Warehouse.Id"></el-option>
          </el-select>
        </div>
        <div>
          <label>供应商</label>
          <el-select v-model="searchForm.VendorId" style="width: 160px;" placeholder="请选择出库仓" >
            <el-option v-for="Vendor in VendorList" :key="Vendor.Id" :label="Vendor.VendorName"
              :value="Vendor.Id"></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
  
      <div class="page-section">
  
        <!--表单-->
        <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column fixed prop="Number" label="采购单编号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="VendorName" label="供应商" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="WarehouseName" label="入货仓" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="DeliveryDate" label="交货日期" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.DeliveryDate | formatDateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Status" label="采购状态" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag type="info" v-if="Number(scope.row.Status) === 0">待审核</el-tag>
              <el-tag type="success" v-else-if="Number(scope.row.Status) === 1">已审核</el-tag>
              <el-tag type="danger" v-else-if="Number(scope.row.Status) === 2">已入库</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.CreateTime | formatDateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="State" label="货物状态" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.State == '0'">未到货</el-tag>
              <el-tag type="success" v-else-if="scope.row.State == '1'">部分到货</el-tag>
              <el-tag type="danger" v-else-if="scope.row.State == '2'">全部到货</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" :show-overflow-tooltip="true" width="220">
        <template slot-scope="scope">
            <el-button type="text" @click="details(scope.row)">明细</el-button>
            <el-button type="text" @click="handleChecked(scope.row)">选择</el-button>
        </template>
        </el-table-column>
        </el-table>
  
        
      <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount" />
      </div>
  
  
      <!--单窗-->
      <el-dialog append-to-body :close-on-click-model="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="60%" >
        <OrderPoItemDetails v-if="dialogDomain.dialogVisible" :model="model" />
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Pagination from '@/components/Pagination.vue';
  import OrderPoItemDetails from './OrderPoItemDetails.vue';
  
  
  export default {
    components: {
      OrderPoItemDetails,
      Pagination
    },
    mounted() {
      this.dataBind();
    },
    data() {
  
      return {
        WarehouseList: [],
        VendorList: [],
        searchForm: {
          Number: '',
          VendorId: '',
          WarehouseId: '',
          Status:'1',
        },
  
        dialogDomain: {
          title: '采购单明细',
          dialogVisible: false,
        },
  
        pageDomain: {
          PageIndex: 1,
          PageSize: 10,
          TotalCount: 0
        },
        tableData: [],
        isLoading: false,
  
      }
  
    },
    created() {
      this.GetOrderPoSelectData();
    },
    methods: {
      
      details(model) {
        this.dialogDomain.title = "采购单明细";
        this.dialogDomain.dialogVisible = true;
        this.dialogDomain.dialogType = 1;
        this.model = model;
      },
      handleChecked(model){
        this.$http.get('/api/OrderPo/GetOrderPoId',{
            params:{
                OrderPoId:model.Id,
                WarehouseId: model.WarehouseId
            }
        })
        .then(res=>{
            this.$emit('callback',model,res.Data)
        })
      },
      
      
      search() {
        this.pageDomain.PageIndex = 1;
        this.dataBind();
      },
      reset() {
        this.searchForm.Number = '';
        this.searchForm.VendorId = '';
        this.searchForm.WarehouseId = '';
        this.searchForm.Status = '-1';
      },
      dataBind() {
        this.isLoading = true;
        this.$http.get('/api/OrderPo',
          {
            params: {
              PageIndex: this.pageDomain.PageIndex,
              PageSize: this.pageDomain.PageSize,
              Number: this.searchForm.Number,
              VendorId: this.searchForm.VendorId,
              WarehouseId: this.searchForm.WarehouseId,
              Status:this.searchForm.Status
            }
          })
          .then(res => {
            this.tableData = res.Data;
            this.pageDomain.TotalCount = res.Count;
            this.isLoading = false;
          })
      },
      GetOrderPoSelectData() {
        this.$http.get('./api/Integrated/GetOrderPoSelectData')
          .then(res => {
            console.log(res.Data);
            this.VendorList = res.Data.VendorList;
            this.WarehouseList = res.Data.WarehouseList;
          })
      },
      //分页方法
      handleSizeChange(val) {
        this.pageDomain.PageIndex = 1;
        this.pageDomain.PageSize = val;
        this.dataBind();
      },
      handleCurrentChange(val) {
        this.pageDomain.PageIndex = val;
        this.dataBind();
      }
    }
  
  }
  </script>
  
  <style></style>